<template>
	<div>
		<div style="width:50%;float:left" v-loading.body="loading">
			<!-- 数据列表 -->
			<el-table :data="tableList.dataList" style="width: 100%" border @row-click="selectedRow">
			      <el-table-column type="index" width="70"></el-table-column>
			      <el-table-column prop="user_id" label="修改用户"></el-table-column>
			      <el-table-column prop="intime" label="修改时间"></el-table-column>

			</el-table>
		</div>
		<div style="width:50%;float:right" v-loading.body="infoLoading">
			<el-form ref="form" :model="form" label-width="80px">

	            <el-form-item v-for="item in formParamList" :label="item.name" :key="item.id">
	            	<div v-if="item.type == 'text'">
		                <el-input v-model="form[item.param]" :disabled="true"></el-input>
	            	</div>
	            	<div v-if="item.type == 'select'">
	            		<el-select placeholder="请选择内容" disabled v-model="form[item.param]">
		                    <el-option v-for="item2 in dealJson(item.value)"  :label="item2.label" :value="item2.value" :key="item2.value"></el-option>
		                </el-select>
	            	</div>

	            	<div v-if="item.type=='radio' ">
	            		<el-radio-group v-model="form[item.param]">
						    <el-radio v-for="item3 in dealJson(item.value)" :disabled="true" :label="item3.value" :key="item3.value">{{item3.label}}</el-radio>
						  </el-radio-group>
	            	</div>

	            	<div v-if="item.type=='checkbox' ">
	            		<el-checkbox-group v-model="form[item.param]">
						    <el-checkbox v-for="item4 in dealJson(item.value)" :disabled="true" :label="item4.value" :key="item4.value">{{item4.label}}</el-checkbox>
						  </el-checkbox-group>
	            	</div>

	            	<div v-if="item.type=='file'">
	            		<el-upload class="upload-demo" :action="fileUploadAction" :data="{param:item.param}"  :file-list="defaultFileList[item.param]" list-type="picture" :on-preview="openPreview"></el-upload>

	            	</div>

	            	<div v-if="item.type =='image'">
	            		<el-upload class="upload-demo" :action="fileUploadAction" :data="{param:item.param}"  :file-list="defaultImageFileList[item.param]" list-type="picture" :on-preview="openPreview"></el-upload>
	            	</div>

	            	<div v-if="item.type =='textarea'">
	            		<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form[item.param]" :disabled="true"></el-input>
	            	</div>
	                
	            </el-form-item>

	        </el-form>
		</div>
		
	</div>
</template>


<script>

import _param from './param.vue'
import _http from './http.vue'
export default{
	props:['formTplId','requestUrl','formTplValueId'],
	data(){
		return {
			//效果不大参数
			loading:false,
			infoLoading:false,
			imageDialog:false,
			dialogImageUrl:'',
			//有效参数
			form:{},
			formParamList:{},
           	fileUploadAction:_param.param.fileUploadUrl,
			formValueLogListUrl:_param.param.configGetFormValueLogListUrl,
			formValueLogInfoUrl:_param.param.configGetFormValueLogInfoUrl,
           	defaultFileList:{},//默认的文件列表
           	fileList:{},//文件列表
			fileUidList:{},//删除文件时需要
			fileDealFlag:false,
			defaultImageFileList:{},
			imageFileList:{},
			imageUidList:{},
			imageFileDealFlag:false,

			//左边表格
			tableList:{
				dataList:[]
			}
		}
	},

	mounted(){
		this.loading = true
		this.getProductLogList()
	},
	methods:{
		openPreview(file,fileList){
			window.open(file.url);
		},
		selectedRow(row,event,column){
			this.infoLoading = true
			_http.axiosRequest(this,this.formValueLogInfoUrl,{id:row.id},(res)=>{
				this.defaultFileList = {}
				this.defaultImageFileList = {}
				this.form = res.data.valueInfo
				this.formParamList = res.data.valueTypeList

				let b = this.formParamList
				for(let i in b){
					if (b[i]['type'] == 'file') {
						let c = this.form[b[i]['param']];
						for (let j = 0; j < c.length; j++) {
							if (!this.defaultFileList[b[i]['param']]) {
								this.defaultFileList[b[i]['param']] = []
							}
							this.defaultFileList[b[i]['param']].push({name:c[j]['name'],url:c[j]['url']})
						}
						
					}else if(b[i]['type'] == 'image'){
						let c = this.form[b[i]['param']];
						for (let j = 0; j < c.length; j++) {
							if (!this.defaultImageFileList[b[i]['param']]) {
								this.defaultImageFileList[b[i]['param']] = []
							}
							this.defaultImageFileList[b[i]['param']].push({name:c[j]['name'],url:c[j]['url']})
						}
					}
				}

				this.infoLoading = false
			})
		},
		getProductLogList(){
			_http.axiosRequest(this,this.formValueLogListUrl,{formTplId:this.formTplId,formValueId:this.formTplValueId},(res)=>{
				this.tableList.dataList = res.data
				this.loading = false
			})
		},
		
		
		dealJson(item){
			return JSON.parse(item)
		}

	}
}	
</script>